<template>
    <div class="teamplate-charts">
        <div class="container-fluid">
            <div class="row" style="overflow: hidden;border:1px solid #ddd;">
                 <div class="clearfix t-msg " style="height:70px">
                    <div class="col-lg-2 col-md-2 " style="line-height:70px;">
                        <div class="biaoti">
                        实时营业额
                        </div>
                    </div>
                    <div class="col-lg-5 col-md-5 son-l">
                        <div class="pull-left">
                            <i class="iconfont icon-qian"></i>
                        </div>
                        <div class="col-lg-4">
                            <p>实时收款</p>
                            <p class="font">{{shiShiShouKuan | formatPrice}}</p>
                        </div>
                        <!-- <div class="col-lg-6">
                            <p>医保:
                                <span class="font">暂无数据</span>
                            </p>
                            <p>自费:
                                <span class="font">暂无数据</span>
                            </p>
                        </div> -->
                    </div>
                    <div class="col-lg-5 col-md-5 son-r">
                        <div class="pull-left">
                            <i class="iconfont icon-huiyuanqia"></i>
                        </div>
                        <div class="col-lg-7">
                            <p>激活会员卡</p>
                            <p class="font">{{kksl}} 个</p>
                        </div>
                    </div>
                </div>
                <div class="clearfix table-list">
                    <div class="col-lg-6 col-md-6" style="border-right:1px solid #dee6f1;">
                        <ul class="item-hd clearfix">
                            <li>实时收款方式汇总</li>
                            <!-- <li @click="onTab1(2)">实时收款员收银总况</li> -->
                        </ul>
                        <div class="item-bd">
                            <div class="item">
                                <div class="table-wrap">
                                    <table class="table table-striped" width="100%">
                                        <tbody>
                                            <tr>
                                                <th style="text-align:left">账簿编号</th>
                                                <th style="text-align:left">账簿名称</th>
                                                <th style="text-align:right">收款金额</th>
                                                <th style="text-align:right">找零</th>
                                                <th style="text-align:right">抹零</th>
                                                <th style="text-align:right">实收金额</th>
                                            </tr>
                                            <tr v-for="(item,index) in lists.list1">
                                                <td>{{item.jsfsbh}}</td>
                                                <td>{{item.jsfsmch}}</td>
                                                <td style="text-align:right">{{item.shkje | nums}}</td>
                                                <td style="text-align:right">{{item.zhaol | nums}}</td>
                                                <td style="text-align:right">{{item.moling | nums}}</td>
                                                <td style="text-align:right">{{item.sshje | nums}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="pie-wrap">
                                    <div class="chart-box">
                                        <div id="chart1" class="son-chart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <ul class="item-hd clearfix">
                            <li @click="onTab2(1)">实时收款员汇总</li>
                            <li @click="onTab2(2)">实时收款员汇总</li>
                        </ul>
                        <div class="item-bd"></div>
                            <div class="item" v-show="itemRight==1">
                                <div class="table-wrap item" >
                                    <table class="table table-striped" width="100%">
                                        <tbody>
                                            <tr>
                                                <th style="text-align:left">收款台内码</th>
                                                <th style="text-align:left">收款员</th>
                                                <th style="text-align:right">应收金额</th>
                                                <th style="text-align:right">实收金额</th>
                                                <th style="text-align:right">优惠金额</th>
                                                <th style="text-align:right">抹零</th>
                                            </tr>
                                            <tr v-for="(item,index) in lists.list2">
                                                <td>{{item.sktid}}</td>
                                                <td>{{item.shky}}</td>
                                                <td style="text-align:right">{{item.ysje | nums}}</td>
                                                <td style="text-align:right">{{item.sshje | nums}}</td>
                                                <td style="text-align:right">{{item.yhje | nums}}</td>
                                                <td style="text-align:right">{{item.moling | nums}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="pie-wrap">
                                    <div class="chart-box">
                                        <div id="chart2" class="son-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="tiem" v-show="itemRight==2">
                                <div class="table-wrap item" v-show="itemRight==2">
                                    <table class="table table-striped" width="100%">
                                        <tbody>
                                            <tr>
                                                <th style="text-align:left">收款员</th>
                                                <th style="text-align:right">应收金额</th>
                                                <th style="text-align:right">实收金额</th>
                                                <th style="text-align:right">金额</th>
                                                <th style="text-align:right">税额</th>
                                                <th style="text-align:right">成本金额</th>
                                                <th style="text-align:right">毛利</th>
                                            </tr>
                                            <tr v-for="(item,index) in lists.list3">
                                                <td>{{item.shky}}</td>
                                                <td style="text-align:right">{{item.ysje | nums }}</td>
                                                <td style="text-align:right">{{item.sshje | nums }}</td>
                                                <td style="text-align:right">{{item.je | nums}}</td>
                                                <td style="text-align:right">{{item.she | nums}}</td>
                                                <td style="text-align:right">{{item.chbje | nums}}</td>
                                                <td style="text-align:right">{{item.ml | nums}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix line-wrap row">
                    <div class="chart-box">
                        <div id="chart3" class="son-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                sktid: "",
                itemRight: 1,
                lists: {
                    list1: [],
                    list2: [],
                    list3: []
                },
                chart: {
                    pie1: {
                        title: [],
                        data: []
                    },
                    pie2: {
                        title: [],
                        data: []
                    },
                    line: {
                        title: [],
                        data: [],
                        onhour: []
                    }
                },
                shiShiShouKuan: "",
                kksl: ""
            };
        },
        watch: {},
        filters: {
            nums: info => {
                return info.toFixed(2);
            }
        },
        methods: {
            // onTab1(num) {
            //     let me = this;
            //     me.itemLeft = num;
            // },
            onTab2(num) {
                let me = this;
                me.itemRight = num;
            },
            onLeftData(e) {
                let me = this;
                me.service.sumSshje(me, data => {
                    let sum = data.data.sum;
                    me.lists.list1 = data.data.selectShkje;
                    me.lists.list2 = data.data.selectZgCount;

                    for (let i in me.lists.list1) {
                        me.chart.pie1.title.push($.trim(me.lists.list1[i].jsfsmch));
                        me.chart.pie1.data.push({
                            value: me.lists.list1[i].sshje,
                            name: $.trim(me.lists.list1[i].jsfsmch)
                        });
                    }

                    for (let i in sum) {
                        me.chart.pie2.title.push(sum[i].shky);
                        me.chart.pie2.data.push({
                            value: sum[i].sshje,
                            name: $.trim(sum[i].shky)
                        });
                    }
                    console.log(me.chart.pie2.title, me.chart.pie1.title);
                    let myChart1 = echarts.init(document.getElementById("chart1"));
                    let myChart2 = echarts.init(document.getElementById("chart2"));
                    let option1 = {
                        tooltip: {
                            trigger: "item",
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: "vertical",
                            right: "10%",
                            top: "30%",
                            data: me.chart.pie1.title
                        },
                        series: [{
                            type: "pie",
                            radius: "75%",
                            center: ["40%", "50%"],
                            data: me.chart.pie1.data,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)"
                                }
                            }
                        }]
                    };
                    let option2 = {
                        tooltip: {
                            trigger: "item",
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: "vertical",
                            right: "10%",
                            top: "30%",
                            data: me.chart.pie2.title
                        },
                        series: [{
                            type: "pie",
                            radius: "75%",
                            center: ["40%", "50%"],
                            data: me.chart.pie2.data,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)"
                                }
                            }
                        }]
                    };
                    myChart1.setOption(option1);
                    myChart2.setOption(option2);
                });
                let res = {
                    fdbs: localStorage.getItem("fdbs")
                };
                me.service.sumSKYSKQK(me, res, data => {
                    me.lists.list3 = data.data;
                });
            }
        },
        mounted() {
            let me = this;
            let user = JSON.parse(sessionStorage.getItem("user"));
            if (!user) {
                router.push({
                    path: "/login"
                });
                return;
            }
            let chartPie = $(".pie-wrap").find(".son-chart");
            let wrapPie = chartPie.parent(".chart-box");
            let chartLine = $(".line-wrap").find(".son-chart");
            let wrapLine = chartLine.parent(".chart-box");
            me.sktid = user.dzycode;
            chartPie.css({
                width: wrapPie.width(),
                height: wrapPie.height()
            });
            chartLine.css({
                width: wrapLine.width(),
                height: wrapLine.height()
            });

            me.onLeftData();
            me.service.selectLkS(me, data => {
                let myChart3 = echarts.init(document.getElementById("chart3"));
                data.data.forEach((item, index) => {
                    me.chart.line.title.push(item.rq);
                    me.chart.line.data.push({
                        name: item.rq,
                        data: item.tt,
                        type: "line",
                        stack: "总量",
                        areaStyle: {
                            normal: {}
                        }
                    });
                    me.chart.line.onhour = item.onhour;
                });
                console.log(me.chart.line.data, "7474748");
                let option3 = {
                    title: {
                        text: "来客数"
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "cross",
                            label: {
                                backgroundColor: "#6a7985"
                            }
                        }
                    },
                    legend: {
                        data: me.chart.line.title
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        boundaryGap: false,
                        data: [
                            "00:00",
                            "01:00",
                            "02:00",
                            "03:00",
                            "04:00",
                            "05:00",
                            "05:00",
                            "07:00",
                            "08:00",
                            "09:00",
                            "10:00",
                            "11:00",
                            "12:00",
                            "13:00",
                            "14:00",
                            "15:00",
                            "16:00",
                            "17:00",
                            "18:00",
                            "19:00",
                            "20:00",
                            "21:00",
                            "22:00",
                            "23:00"
                        ]
                    }],
                    yAxis: [{
                        type: "value"
                    }],
                    series: me.chart.line.data
                };
                myChart3.setOption(option3);
            });
        }
    };
</script>